<template>
	<view>
		<view class="top_box">
			<view class="top_box_img">
				<view class="top_box_img_text">
					<view class="setup d-e-c" @click="goPage('/pages/user/setup/setup')">
						<u-icon name="setting" color="#333" size="50"></u-icon>
					</view>
					<view class="info d-b-c">
						<view class="d-s-c">
							<view class="top_box_img_text_atar">
								<image src="../../static/index1/81.png" mode="" v-if="isAvatar(userInfo.avatar)"></image>
								<image :src="`${imgUrl}${userInfo.avatar}`" mode="" v-else></image>
							</view>
							<view class="ml30">
								<view class=" f32 fb mb23 d-s-c">
									{{ userInfo.nickname }}
									<view class="grade-box">六年级</view>
								</view>
								<view class="top_num d-s-c f26">
									<image src="/static/index1/74.png" mode="widthFix"></image>
									合肥市蜀山区
								</view>
							</view>
						</view>
						<view class="f24 editor" @click="goPage('/pages/myhome/myinfo')">
							编辑信息
							<u-icon name="arrow-right" color="#999" size="30"></u-icon>
						</view>
					</view>
					<view class="p-box d-b-c">
						<view class="p1-item d-c-c">
							<image src="/static/index1/75.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">今日识词</text>
							</view>
						</view>
						<view class="p1-item d-c-c">
							<image src="/static/index1/76.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">今日待复习</text>
							</view>
						</view>
						<view class="p1-item d-c-c">
							<image src="/static/index1/77.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">累计学习</text>
							</view>
						</view>
					</view>
					<view class="p-box d-b-c">
						<view class="p1-item d-c-c">
							<image src="/static/index1/78.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">今日朗读</text>
							</view>
						</view>
						<view class="p1-item d-c-c">
							<image src="/static/index1/79.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">累计朗读</text>
							</view>
						</view>
						<view class="p1-item d-c-c">
							<image src="/static/index1/80.png" mode="widthFix"></image>
							<view class="text d-s-c">
								<text class="text-n f40">86</text>
								<text class="text-l f24">累计抗遗忘</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="con_box">
				<view class="con_box_item d-b-c" v-for="(item, index) in list" :key="index" @click="goPage(item.url)">
					<view class="d-s-c">
						<view class="con_box_item_img ">
							<image :src="item.img" mode="widthFix"></image>
						</view>
						<view class="ml20 mr20">
							<view class="f30 gray3 mb16">
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="con_box_item_but">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="changeUserShow" mode="center" border-radius="10" width="80%">
			<view class="title">账号切换</view>
			<view class="user-list">
				<view class="user-item" v-for="(user, uIndex) in userList" :key="uIndex">
					<view class="name">{{user.username}}</view>
					<view>
						<view class="state" v-if="user.is_current==0" @click="userLogin(uIndex)">登录</view>
						<view class="state active" v-else>当前</view>
					</view>
					<view>
						<view class="delete" v-if="user.is_current==0" @click="userDelete(uIndex)">删除</view>
						<view class="delete disable" v-else>删除</view>
					</view>
				</view>
			</view>
			<view class="logout" @click="logout">退出登录</view>
		</u-popup>
	</view>
</template>

<script>
	import evaluation from '@/pages/components/reviewEvaluation.vue'
	export default {
		components:{evaluation},
		data() {
			return {
				isPad: getApp().globalData.isPad,
				imgUrl: getApp().globalData.imgUrl,
				todayStudyNum: 0,
				todayReviewNum: 0,
				totalStudyNum: 0,
				list: [
					{
						img: "../../static/index1/82.png",
						name: '个人信息',
						url: '/pages/user/profile/profile'
					},
					{
						img: "../../static/index1/83.png",
						name: '生词本',
						url: '/pages/user/newWord/newWord'
					},
					{
						img: "../../static/index1/84.png",
						name: '不背单词',
						url: '/pages/user/notStudy/notStudy'
					},
					{
						img: "../../static/index1/85.png",
						name: '词汇检测',
						url: ''
					},
					{
						img: "../../static/index1/86.png",
						name: '词汇检测记录',
						url: '/pages/user/exam/record'
					},
					{
						img: "../../static/my/my_icon6.png",
						name: '切换账号',
						url: 'changeAccount'
					},
				],
				changeUserShow: false,
			}
		},
		computed: {
			userList() {
				return this.$store.state.userList
			},
			userInfo() {
				return this.$store.state.userInfo
			},
			isAvatar(avatar) {
				return (avatar) => {
					if (avatar.includes('data:image')) {
						return true
					} else {
						return false
					}
				}
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				this.getStudyStatistics()
			}
		},
		methods: {
			getStudyStatistics() {
				this.$u.get(this.$u.api.studyStatistics).then((res) => {
					this.todayStudyNum = res.data.today_study_num
					this.todayReviewNum = res.data.today_review_num
					this.totalStudyNum = res.data.total_study_num
				}).catch((err) => {
					console.log(err)
				})
			},
			// 退出登录
			logout() {
				let that = this
				that.changeUserShow = false
				uni.showModal({
					title: '退出登录',
					content: '您确定退出当前账号吗？',
					showCancel: true,
					confirmColor: '#4BB0FF',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在退出...'
							})
							that.$u.post(that.$u.api.logout, {}).then((res) => {
								uni.hideLoading()
								that.$store.dispatch('userLogout')
								uni.$u.toast('退出成功')
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}, 1500)
							}).catch((err) => {
								uni.hideLoading()
								console.log(err)
								uni.$u.toast(err.data.msg)
							})
						}
					}
				})
			},
			goPage(page) {
				if (page == 'changeAccount') {
					this.changeUserShow = true
				} else {
					uni.navigateTo({
						url: page
					})
				}
			},
			userLogin(index) {
				let userInfo = this.userList[index]
				this.$u.post(this.$u.api.tokenLogin, {
					id: userInfo.id,
					token: userInfo.token
				}).then((res) => {
					this.changeUserShow = false
					this.$store.dispatch('userLogin', res.data.userinfo)
					uni.$u.toast('登录成功')
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			userDelete(index) {
				this.$store.dispatch('userDelete', index)
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100vh;
		background: linear-gradient(to bottom,#d4ecff 60%,#fff 90%);
	}
	.top_box_img{
		width: 100%;
		// height: 35vh;
		// position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.top_box_img_text{
			// position: absolute;
			margin-top: 2vh;
			margin-left: 4%;
			width: 92%;
		}
		.setup {
			position: absolute;
			top: 1.5vh;
			right: 30rpx;
		}
		.info {
			height: 14vh;
			padding-top: 4vh;
			margin-bottom: 50rpx;
		}
		.top_box_img_text_atar{
			width: 10vh;
			height: 10vh;
			border-radius: 100%;
			image{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.top_num{
			color: #A0BDFF;
			color: #999;
			image{
				width: 24rpx;
				margin-right: 5rpx;
			}
		}
		.editor{
			color: #999;
		}
		.top_box_img_text_but{
			height: 8vh;
			margin: 2vh 30rpx;
		}
		.top_box_img_text_lin{
			width: 2rpx;
			height: 38rpx;
			background: #EFF2F7;
			opacity: 0.2;
		}
		
		.grade-box{
			padding:0 10rpx;
			line-height: 30rpx;
			background-color: #4BB0FF;
			border-radius: 15rpx;
			margin-left: 15rpx;
			font-size: 20rpx;
			font-weight: 100;
			color: #fff;
			
		}
		
		.p-box{
			gap:16rpx;
			margin-bottom: 16rpx;
			.p1-item{
				background-color: #fff;
				border-radius:16rpx;
				padding: 25rpx 0;
				flex:1;
				gap:10rpx;
				align-items: flex-start;
				image{
					width: 48rpx;
				}
			}
			.text{
				flex-direction: column;
				align-items: flex-start;
				.text-n{
					line-height: 40rpx;
				}
				.text-l{
					color: #999;
				}
			}
		}
	}
	.con {
		width: 100%;
		padding: 0 4% 40rpx;
		margin-top: 32rpx;
		// position: absolute;
		// top: 28vh;
		// left: 0;
	}
	.con_box{
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.con_box_item{
		padding: 30rpx 0;
		margin: 0 30rpx;
		
		image{
			width: 38rpx;
			// height: 35rpx;
		}
	}
	
	.title{
		margin: 20rpx 0;
		text-align: center;
	}
	.user-list{
		padding: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.user-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		font-size: 24rpx;
		padding: 10px 0;
		border-bottom: 1rpx solid #ccc;
		.name{
			width: 200rpx;
			margin-right: auto;
		}
		
		.state{
			width: 100rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 23rpx;
			text-align: center;
			margin-right: 10rpx;
			color: #4BB0FF;
			border: 1rpx solid #4BB0FF;
			cursor: pointer;
		}
		
		.active{
			background-color: #4BB0FF;
			color: #fff;
		}
		
		.delete{
			width: 100rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 23rpx;
			text-align: center;
			color: rgba(255,0,0,.5);
			border: 1rpx solid rgba(255,0,0,.5);
			cursor: pointer;
		}
		
		.disable{
			background: #BBBBBB;
			color: #fff;
			border: 1rpx solid #BBBBBB;
		}
		
	}
	
	.logout{
		width: 80%;
		line-height: 60rpx;
		text-align: center;
		margin: 40rpx auto;
		border:1rpx solid #4BB0FF;
		color: #4BB0FF;
		border-radius: 5rpx;
		cursor: pointer;
	}
</style>
